<template>
	<view class="scale__wrap">
		<view class="scale__h" v-if="title != null || title !== ''">{{title}}</view>
		<view class="scale__con">
			<view class="scale__line">
				<view class="scale__ticks">
					<view class="scale__fill" :style="`width:`+fillWidth"></view>
					<view class="tick long"></view>
					<view :class="item%2==1?`tick short` : `tick long` " v-for="item in tick"></view>
				</view>
				<view class="scale__knob" :style="`left:`+fillWidth"></view>
			</view>
		</view>
		<div class="scale__labels">
		      <span class="scale__label min">0{{unit}}</span>
		      <span class="scale__label max">100{{unit}}</span>
		</div>
	</view>
</template>

<script setup lang="ts">
	import { ref , reactive, nextTick, computed } from 'vue'
	const props = withDefaults(
		defineProps<{
        title?: string,
        value?: number,
        unit?: string,
        tick?: number,
		max:number,
		step:number,
    }>(),{
        title: null,
        value: 40,
        unit: '℃',
        tick: 20,
		max:100,
		step:1,
    })
	const fillWidth = ref(40);
</script>
<style lang="scss" scoped>
	.scale__wrap{width:100%;display: block;position: relative;
		.scale__h{padding-top:10px; padding-bottom:10px; font-size: 14px; color:#333;font-weight: 400;}
		.scale__con{padding:20rpx; border-radius: 999px;background-image:linear-gradient(180deg, #E2E2E2 0%, #F7F7F7 100%);box-shadow: -2px -2px 4px 2px #FFFFFF,0px 2px 5px 0px rgba(0, 0, 0, 0.15),inset -2px -2px 4px 0px #FFFFFF,inset 2px 2px 4px 0px rgba(0, 0, 0, 0.3);
			.scale__line{height:16px;position: relative; border-radius:999px;background-color: #e3e1e5;z-index: 20;
				.scale__fill {position: absolute;inset: 0 auto 0 0;height: 100%;border-radius: inherit;z-index:25;background-color:#02A3F3;}
				.scale__ticks{position: absolute;inset: 0;display: flex;align-items: center;justify-content: space-between;padding: 0 2px;pointer-events: none;z-index: 30;
					.tick {width: 1px;background: #ffffff; border-radius: 1px;opacity: 1;filter: drop-shadow(0 0 1rpx rgba(0,0,0,0.25));}
					.short { height: 38%; }
					.long  { height: 70%; }
				}
				.scale__knob {position: absolute;top: 50%;transform: translate(-50%, -50%);width:10px; height:10px;border-radius: 50%;background: #02A3F3; /* 圆心为 #02A3F3 */
				       border: 6px solid #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.15);pointer-events: auto;cursor: pointer;z-index: 35;}
			}
		}
		.scale__labels{display: flex; align-items: center; justify-content: space-between;
			.scale__label{padding:10rpx 0; color:#999;font-size: 26rpx;}
		}
	}
</style>